织梦cms| 帝国cms| WordPress discuz| phpcms| z-blog| ecshop| 其他cms|

WordPress

推荐列表 站点导航

当前位置：首页 > 建站教程 > WordPress >

JS实现滚轮翻页效果的示例代码

来源:网络整理  作者:  发布时间:2020-12-21 01:58
这篇文章主要介绍了使用原生JS实现滚轮翻页效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者...

height: 100vh;

其中用到了节流函数throttle()，函数代码如下：

}

</html>  

.container {

<meta charset="UTF-8">

.item {

overflow: hidden;

let endTime = 0;

i--;

<script src="https://www.wpmee.com/sun.js"></script>

<!DOCTYPE html>

<div>

} else {

JS实现滚轮翻页效果的示例代码 (https://www.wpmee.com/) javascript教程 第1张

})

}

body {

endTime = new Date();

margin: 0;

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件，这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中，都提供了 “mousewheel” 事件，而 Firefox 3.5+ 中提供了一个等同的事件：”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。

<div></div>

<div></div>

1、“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。

<body>

三、源代码

$(() => {

<meta content="width=device-width, initial-scale=1.0">

<head>

<div></div>

<script>

function throttle(fn,wait) {

一、滚轮事件

</div>

transition: .5s;

</script>

二、实现效果

</body>

if(new Date() - endTime < wait) return;

</head>

},500);

<style>

let move = sun.throttle(e => {

fn.apply(this,arguments);

padding: 0;

$(".container").css("transform",`translateY(-${i*100}vh)`);

},  

return function() {

<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>

if( i === $(".item").length - 1) return ;

<html lang="en">

if( i === 0) return;

* {

i++;

到此这篇关于使用原生JS实现滚轮翻页效果的示例代码的文章就介绍到这了,希望大家以后多多支持！

JS实现滚轮翻页效果的示例代码 (https://www.wpmee.com/) javascript教程 第2张

window.onmousewheel = move;

let i = 0;

}

</style>

if(e.wheelDelta < 0) {

}

<title>Document</title>

2、“DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。

这篇文章主要介绍了使用原生JS实现滚轮翻页效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

}

<div></div>

width: 100vw;

}

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jz/wp/6437.shtml

上一篇：WordPress怎么自动给文章添
下一篇：如何在vue中使用jointjs过程
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程
最新文章
ludou_se_only); } add_action(s ludou_se_only); } add_action(s

时间：2021-01-23

所以经常导致输错密码的 所以经常导致输错密码的

时间：2021-01-23

WordPress措施打开速度慢的 WordPress措施打开速度慢的

时间：2021-01-22

WordPress回覆评论自动添加 WordPress回覆评论自动添加

时间：2021-01-22

我们可以通过下面的代码 我们可以通过下面的代码

时间：2021-01-22

如何修改WordPress默认脚色 如何修改WordPress默认脚色

时间：2021-01-20

同样的修改文件就行 同样的修改文件就行

时间：2021-01-20

少数善意的转载者既使没 少数善意的转载者既使没

时间：2021-01-20

热门文章
WordPress新手安装教程(图文) WordPress新手安装教程(图文)

时间：2020-12-28

在设置菜单中增加WordPress私密 隐藏的全部 在设置菜单中增加WordPress私密 隐藏的全部

时间：2021-01-10

WordPress博客程序常见错误的解决方法 WordPress博客程序常见错误的解决方法

时间：2020-12-28

WordPress程序打开速度慢的三种解决方法 WordPress程序打开速度慢的三种解决方法

时间：2021-01-10

wordpress使用代码在每篇文章尾部添加版权 wordpress使用代码在每篇文章尾部添加版权

时间：2020-12-14

WordPress博客措施常见错误的办理要领 WordPress博客措施常见错误的办理要领

时间：2021-01-15

关于WordPress的SEO优化相关的一些PHP页面脚 关于WordPress的SEO优化相关的一些PHP页面脚

时间：2021-01-07

WordPress措施打开速度慢的三种办理要领 WordPress措施打开速度慢的三种办理要领

时间：2021-01-22

详解WordPress中的头像缓存和署理中的缓存 详解WordPress中的头像缓存和署理中的缓存

时间：2021-01-15

少数善意的转载者既使没有看到版权信息 少数善意的转载者既使没有看到版权信息

时间：2021-01-20

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

JS实现滚轮翻页效果的示例代码

2020-12-21　编辑：

height: 100vh;

其中用到了节流函数throttle()，函数代码如下：

}

</html>  

.container {

<meta charset="UTF-8">

.item {

overflow: hidden;

let endTime = 0;

i--;

<script src="https://www.wpmee.com/sun.js"></script>

<!DOCTYPE html>

<div>

} else {

JS实现滚轮翻页效果的示例代码 (https://www.wpmee.com/) javascript教程 第1张

})

}

body {

endTime = new Date();

margin: 0;

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件，这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中，都提供了 “mousewheel” 事件，而 Firefox 3.5+ 中提供了一个等同的事件：”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。

<div></div>

<div></div>

1、“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。

<body>

三、源代码

$(() => {

<meta content="width=device-width, initial-scale=1.0">

<head>

<div></div>

<script>

function throttle(fn,wait) {

一、滚轮事件

</div>

transition: .5s;

</script>

二、实现效果

</body>

if(new Date() - endTime < wait) return;

</head>

},500);

<style>

let move = sun.throttle(e => {

fn.apply(this,arguments);

padding: 0;

$(".container").css("transform",`translateY(-${i*100}vh)`);

},  

return function() {

<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>

if( i === $(".item").length - 1) return ;

<html lang="en">

if( i === 0) return;

* {

i++;

到此这篇关于使用原生JS实现滚轮翻页效果的示例代码的文章就介绍到这了,希望大家以后多多支持！

JS实现滚轮翻页效果的示例代码 (https://www.wpmee.com/) javascript教程 第2张

window.onmousewheel = move;

let i = 0;

}

</style>

if(e.wheelDelta < 0) {

}

<title>Document</title>

2、“DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。

这篇文章主要介绍了使用原生JS实现滚轮翻页效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

}

<div></div>

width: 100vw;

}

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供学习参考！
本文地址为 https://v30.fanwenzhu.com/jz/wp/6437.shtml

相关文章

风云图片

ludou_se_only); } add_action(s

ludou_se_only); } add_action(s

所以经常导致输错密码的

所以经常导致输错密码的

WordPress措施打开速度慢的

WordPress措施打开速度慢的

WordPress回覆评论自动添加

WordPress回覆评论自动添加

我们可以通过下面的代码

我们可以通过下面的代码

如何修改WordPress默认脚色

如何修改WordPress默认脚色

推荐阅读

返回WordPress频道首页